<template>
	<view class="pd24_20">
		<view class="bgbox"> </view>
		<view  v-if="isLogin == false" @click="showLoginAct" class="flex alcenter space">
			<view class="flex alcenter">
				<view class="member-face">
					<image class="face" :src="statics.defaultFace"></image>
				</view>
				<view class="ml15">
					<view class="ft16 cl-main">暂未登录</view>
					<view class="mt12 ft12 cl-notice">点击登录 享受更多会员特惠</view>
				</view>
			</view>
			<text class="iconfont iconicon_arrow_small ft12 cl-notice"></text>	
		</view>
		<view  v-else class="flex alcenter space">
			<view class="flex alcenter" @click="opgrzl()">
				<view class="member-face">
					<image class="face" :src="user.avatar?user.avatar:'../../../static/img/yh.png'" mode="aspectFill"></image>
					<!-- <image class="vip-level" :src="userinfo.group_id>1?statics.vipLevelImg[3]:statics.vipLevelImg[0]"></image> -->
				</view>
				<view class="ml15">
					<view class="ft16 cl-main">{{ user.nickname || '' }}</view>
					<view class="mt12 ft12 cl-notice" style="color:#231d1d">ID:{{ user.id || '' }}</view>
				</view>
			</view>
			<view class="btn-mini opsetads" @click="opset">
				<text class="yticon icon-shezhi ft24 cl-notice"></text>
			</view>
		</view>
		<view v-if="isLogin" style="width: 100%; height: 30upx;"></view>
		<!-- <home-vipcard v-if="isLogin" :userinfo="userinfo" @loginAct="showLoginAct" @qrcode="showQrcode = true"></home-vipcard> -->
		<view v-if="isLogin" class="box integal-mall-menu flex pt16 pb16 mt16">
			<view class="col2 text-center"  @click="opod(0)">
				<view>
					<image style="width: 50rpx; height: 50rpx;" src="@/static/img/all.png"></image>
				</view>
				<view class="ft12 mt6">全部</view>
			</view>
			<view @click="opod(1)" class="col2 text-center">
				<view style="position: relative;">
					<uni-badge type="error" class="uni-badge-left-margin dgfdh" size="small" :text="Ordertype['order_count_0']"></uni-badge>
					<image style="width: 56rpx; height: 50rpx;" src="@/static/img/d0.png"></image>
				</view>
				<view class="ft12 mt6">待付款</view>
			</view>
			<view @click="opod(2)" class="col2 text-center">
				<view style="position: relative;">
					<uni-badge type="error" class="uni-badge-left-margin dgfdh" size="small" :text="Ordertype['order_count_2']"></uni-badge>
					<image style="width: 50rpx; height: 50rpx;"  src="@/static/img/d1.png"></image>
				</view>
				<view class="ft12 mt6">待发货</view>
			</view>
			<view @click="opod(3)" class="col2 text-center">
				<view style="position: relative;">
					<uni-badge type="error" class="uni-badge-left-margin dgfdh" size="small" :text="Ordertype['order_count_3']"></uni-badge>
					<image style="width: 56rpx; height: 50rpx;"  src="@/static/img/d2.png"></image>
				</view>
				<view class="ft12 mt6">待收货</view>
			</view>
			<view @click="opod(4)" class="col2 text-center">
				<view>
					<uni-badge type="error" class="uni-badge-left-margin dgfdh" size="small" :text="Ordertype['order_count_4']"></uni-badge>
					<image style="width: 50rpx; height: 50rpx;"  src="@/static/img/d3.png"></image>
				</view>
				<view class="ft12 mt6">已收货</view>
			</view>
			<view @click="opod(5)" class="col2 text-center">
				<view>
					<uni-badge type="error" class="uni-badge-left-margin dgfdh" size="small" :text="Ordertype['order_count_5']"></uni-badge>
					<image style="width: 50rpx; height: 50rpx;"  src="@/static/img/d4.png"></image>
				</view>
				<view class="ft12 mt6">售后</view>
			</view>
		</view>
		<view v-if="isLogin" class="flex alcenter space mt16 box pt5 pb5">
			<view class="ft15" style="width: 102upx;padding-left: 28rpx; ">
				<image src="../../../static/img/th.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
			</view>
			<navigator url="/pages/client/mendian" style="width: 100%;">
				<view class="home-mendian flex alcenter space pr15 cl-w9">
					<view  class="flex alcenter" style="color: #303133;width: 90%;">
						<text class="text-over ft14" style="width: calc(100% - 40rpx); ">{{mendian.nickname?mendian.nickname:""}}</text>
					</view>
					<text class="iconfont iconicon_arrow_small ft12" style="color: #303133;"></text>
				</view>
			</navigator>
		</view>
		<!-- <view class="mt16">
			<home-banner :banners="banners"></home-banner>
		</view>
		<view class="flex wrap space mt16">
			<view v-for="(item,index) in getMenus" :key="index" :class="index > 1 ? 'mt16': ''">
				<view v-if="item.type == 'link'" :data-index="index" @click="memberLinkTo" class="box pd16_15 flex alcenter" style="width: 320rpx;" >
					<image :src="item.icon" style="width: 64rpx;height: 64rpx;"></image>
					<text class="ml15 ft14 ftw500 cl-main">{{item.name}}</text>
				</view>
				<view v-else style="width: 320rpx;">
					<button class="box pd16_15 flex alcenter" :open-type="item.type" style="padding: 32rpx 30rpx; margin: 0;">
						<image :src="item.icon" style="width: 64rpx;height: 64rpx;"></image>
						<text class="ml15 ft14 ftw500 cl-main">{{item.name}}</text>
					</button>
				</view>
			</view>
		</view> -->
		
		<navigator open-type="navigate" url="/pages/client/tuan/order">
			<view class="box pd16_15 mt16 flex alcenter space">
				<view class="flex alcenter">
					<image src="../../../static/img/tz.png" mode="" style="width: 44rpx;height: 46rpx;"></image>
					<!-- <text class="iconfont iconicon_my_shop cl-main ft24"></text> -->
					<text class="ml15 ft14 ftw500 cl-main">团长入口</text>
				</view>
				<text class="iconfont iconicon_arrow_small cl-notice"></text>
			</view>
		</navigator>
		<navigator open-type="navigate" url="/pages/client/siji/order">
			<view class="box pd16_15 mt16 flex alcenter space">
				<view class="flex alcenter">
					<image src="../../../static/img/tz.png" mode="" style="width: 44rpx;height: 46rpx;"></image>
					<!-- <text class="iconfont iconicon_my_shop cl-main ft24"></text> -->
					<text class="ml15 ft14 ftw500 cl-main">司机入口</text>
				</view>
				<text class="iconfont iconicon_arrow_small cl-notice"></text>
			</view>
		</navigator>
		
		
<!-- 		<view class="mt32 flex center alcenter">
			<view class="bd-line" style="width: 120rpx;"></view>
			<view class="ml30 mr30 ft12 cl-notice">推荐小程序</view>
			<view class="bd-line" style="width: 120rpx;"></view>
		</view>
		<view class="mt24 flex alcenter space">
			<view class="flex alcenter">
				<image class="miniapp-icon" style="background: #00C657;"></image>
				<text class="ft14 cl-info2 ml10">小程序A</text>
			</view>
			<view class="flex alcenter">
				<image class="miniapp-icon" style="background: #007AFF;"></image>
				<text class="ft14 cl-info2 ml10">小程序b</text>
			</view>
			
			<navigator url="/pages/client/miniapp">
				<view class="flex alcenter">
					<text class="ft24 iconfont iconicon_more cl-notice"></text>
					<text class="ft14 cl-info2 ml10">更多</text>
				</view>
			</navigator>
		</view> -->
		
		<!-- <com-copyright></com-copyright> -->
		
		<!-- <com-footer model="member"></com-footer> -->
		
		<dialog-birthday v-if="showBirthday" @closed="showBirthday = false"></dialog-birthday>
		<dialog-login v-if="showLogin" @loginYes="loginYes" @closed="showLogin = false"></dialog-login>
		<dialog-qrcode v-if="showQrcode" @closed="showQrcode = false"></dialog-qrcode>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				isLogin:false,
				showLogin:false,
				isBirthday:true,
				showBirthday:false,
				showQrcode:false,
				avatar:'',
				userinfo:[],
				user:{},
				banners:[],
				mendian:[],
				vipLevel:0,
				iskq:0,
				Ordertype:[],
				memberMenus:[
					{name:'我的会员',type:'link',model:'',link:'/pages/client/vipcard/index',icon:this.$config.staticUrl + 'vipcard_icon_my_card@2x.png',show:1},
					{name:'我的订单',type:'link',model:'',link:'/pages/client/shop/order',icon:this.$config.staticUrl + 'vipcard_icon_my_order@2x.png',show:1},
					{name:'收货地址',type:'link',model:'',link:'/pages/client/member/address',icon:this.$config.staticUrl + 'vipcard_icon_my_address@2x.png',show:1},
					{name:'官方商城',type:'link',model:'',link:'/pages/client/shop',icon:this.$config.staticUrl + 'vipcard_icon_my_integral@2x.png',show:0},
					{name:'分销中心',type:'link',model:'',link:'/pages/client/member/mytuandui',icon:this.$config.staticUrl + 'vipcard_icon_my_invite@2x.png',show:1},
					{name:'申请门店',type:'link',model:'',link:'/pages/client/member/mendian',icon:this.$config.staticUrl + 'vipcard_icon_my_card@22x.png',show:1},
					{name:'专属顾问',type:'link',model:'',link:'/pages/client/vipcard/adviser',icon:this.$config.staticUrl + 'vipcard_icon_my_advise@2x.png',show:1},
				],
			}
		},
		computed:{
			getMenus(){
				let arr = new Array;
				for(var a  in this.memberMenus){
					if(this.memberMenus[a].show == 1){
						arr.push(this.memberMenus[a]);
					}
				}
				return arr;
			}
		},
		onLoad(){
			
		},
		onShow() {
			this.mendian=uni.getStorageSync("mendian");
			if(uni.getStorageSync("token")){
				this.isLogin =true; 
				this.ongrzlTap();
			}else{
				this.isLogin =false; 
				this.showLogin =false;
				this.userinfo.isLogin=false
			}
			
		},
		onShareAppMessage(e){
			
		},
		onShareTimeline(e){
			
		},
		onPullDownRefresh(){
			uni.showLoading({
			    title: '加载中'
			});
			if(uni.getStorageSync("token")){
				this.isLogin =true; 
				this.ongrzlTap();
			}else{
				this.isLogin =false; 
				this.showLogin =false;
				this.userinfo.isLogin=false
			}
			this.banners=uni.getStorageSync("config").banner
			uni.stopPullDownRefresh();
		},
		methods:{
			 ongrzlTap(){
				let data = {};
				data.token = uni.getStorageSync("token");
				this.$ajax('post','user/index').then(res=>{
					this.user=res.data.user;
					this.Ordertype=res.data.order
					uni.setStorage({ // 缓存配置信息
						key: 'userinfo',  
						data: res.data.user
					})
				})
			},
			opod(state){
				uni.navigateTo({
					url:'/pages/client/shop/order?state='+state
				})
			},
			setTabBarBadges(count){
				if(count>=99){
					count='99+'
				}
				if(count<=0){
					uni.removeTabBarBadge({
					  index: 2
					})
				}else{
					uni.setTabBarBadge({
					  index: 2,
					  text: ""+count+""
					})
				}
			},
			memberLinkTo(e){
				let index =  parseInt(e.currentTarget.dataset.index);
				if(this.isLogin == false&& this.getMenus[index].model != 'integral'){
					this.showLogin = true;
				}else{
					if(this.getMenus[index].link != ''){
						if(this.getMenus[index].model == 'integral'){
							uni.redirectTo({
								url:this.getMenus[index].link 
							})
						}else{
							uni.navigateTo({
								url:this.getMenus[index].link 
							})
						}
					}
				}
			},
			birthdayAct(){
				if(this.isBirthday){
					uni.navigateTo({
						url:'/pages/client/member/birthday'
					})
				}else{
					uni.navigateTo({
						url:'/pages/client/member/info'
					})
				}
			},
			showLoginAct(){
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: (event)=>{
						//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
						 this.$ajax('post','login/wechat',{code:event.code}).then(res=>{
							 uni.setStorage({//缓存配置信息
							 	key: 'token',  
							 	data: res.data.token
							 })
							 setTimeout(()=>{
								 this.ongrzlTap();
								 this.isLogin =true;
								 if(uni.getStorageSync("shareid")){
									 this.$ajax('post','share/user',{user_id:uni.getStorageSync("shareid")}) 
								 }
							 },200)
						 })
					},
					fail: function (err) {
				        // 登录授权失败
				        // err.code是错误码
				    }
				})
			},
			loginYes(){
				
			},
			opgrzl(){
				uni.navigateTo({
					url:'/pages/set/grzl/grzl'
				})
			},
			opset(){
				uni.navigateTo({
					url:'/pages/set/set'
				})
			}
		}
	}
</script>

<style>
	.bgbox{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 420rpx;
		background-color: #01B750;
		z-index: -1;
	}
	.member-face{
		position: relative;
	}
	.member-face .vip-level{
		height: 48rpx;
		width: 48rpx;
		position: absolute;
		left: calc(50% - 24rpx);
		top: -36rpx;
	}
	.member-face .face{
		width: 160rpx;
		height: 160rpx;
		border:6rpx solid #FFFFFF;
		background: #FFFFFF;
		border-radius: 100rpx;
		box-shadow: 0rpx 24rpx 48rpx 0rpx rgba(197, 202, 219, 0.3);
	}
	.miniapp-icon{
		width: 48rpx;
		height: 48rpx;
		border-radius: 24rpx;
		background: #F2F2F2;
	}
	.dgfdh{
		background:#ff0000!important; 
		position: absolute; 
		top: -30upx;
		 width: auto!important;
		right: 0px;
		border-radius: 50%;
		    overflow: hidden;
	}
	.dgfdh text{
		border-radius: 50%;
		overflow: hidden;
		padding: 0 !important;
	}
	.opsetads{
		
		background: #FFFFFF;
		color:#000000; 
		width: 70upx; 
		line-height: 70upx; 
		height: 70upx; 
		text-align: center; 
		border-radius: 100%;
		animation: rotate 10s linear infinite;
	}
	@keyframes rotate{
	    0%{
	        transform:rotate(0deg) skew(0deg) scale(1);
	        -ms-transform:rotate(0deg) skew(0deg) scale(1);     /* IE 9 */
	        -moz-transform:rotate(0deg) skew(0deg) scale(1);     /* Firefox */
	        -webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari  Chrome */
	        -o-transform:rotate(0deg) skew(0deg) scale(1); 
	    }
	    100%{
	        transform:rotate(360deg) skew(0deg) scale(1);
	        -ms-transform:rotate(360deg) skew(0deg) scale(1);     /* IE 9 */
	        -moz-transform:rotate(360deg) skew(0deg) scale(1);     /* Firefox */
	        -webkit-transform:rotate(360deg) skew(0deg) scale(1); /* Safari  Chrome */
	        -o-transform:rotate(360deg) skew(0deg) scale(1); 
	    }
	}
	.home-mendian{
		width: 100%;
		height: 70rpx;
		background:rgba(255,255,255,0.1);
		border-radius: 16rpx;
	}
</style>